// 学生列表
function renderStudent(){
  axios({
    url:'/students',
    method:'GET',
    headers:{
      Authorization:localStorage.getItem('token')
    }
  }).then(res=>{
    // console.log(res)
    let arr=res.data.data
    document.querySelector('.list').innerHTML =arr.map((item)=>{
      return `
      <tr>
          <td>${item.name}</td>
          <td>${item.age}</td>
          <td>${item.gender > 0 ? '男' : '女'}</td>
          <td>第${item.group}组</td>
          <td>${item.hope_salary}</td>
          <td>${item.salary}</td>
          <td>${item.province}${item.city}${item.area}</td>
          <td>
            <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id='${item.id}'></i></a>
            <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id='${item.id}'></i></a>
          </td>
        </tr> 
      `
    }).join('')

    document.querySelector('.page-content .total').innerHTML = arr.length
  })
}
renderStudent()
// 新增业务
const modalBox= document.querySelector('.modal')
const modal = new bootstrap.Modal(modalBox)
document.querySelector('#openModal').addEventListener('click',function(e){
  let form = document.querySelector('form')
        form.reset()
  // 更改titile
 document.querySelector('.modal-title').innerHTML='添加学员'
  // 1..模态框显示
  modal.show()  
})

    // 2.获取省份
    axios({
      url:'/api/province',
      method:'GET'
    }).then(res=>{
      let mapData=res.data.data
      document.querySelector('[name=province]').innerHTML=`<option value="">--省份--</option>`+mapData.map((item)=>{return `<option value="${item}">${item}</option>`})
    })
    // 3.获取市
      document.querySelector('[name=province]').addEventListener('change',function(){
        let pname = document.querySelector('[name=province]').value
        axios({
          url:'/api/city',
          method:'GET',
          params:{
            pname
          }
        }).then(res=>{
        
          let cityData=res.data.data
          document.querySelector('[name=city]').innerHTML=`<option value="">--城市--</option>`+cityData.map((item)=>{return `<option value="${item}">${item}</option>`})
        })
      })
       // 4.获取地区
    document.querySelector('[name=city]').addEventListener('change',function(){
      let pname = document.querySelector('[name=province]').value
      let cname = document.querySelector('[name=city]').value
      axios({
        url:'/api/area',
        method:'GET',
        params:{
          pname,
          cname
        }
      }).then(res=>{
   
        let areaData=res.data.data
        document.querySelector('[name=area]').innerHTML=`<option value="">--城市--</option>`+areaData.map((item)=>{return `<option value="${item}">${item}</option>`})
      })
    })
    // 5.点击新增
document.querySelector('#submit').addEventListener('click',function(){
  if(document.querySelector('.modal-title').innerHTML==='添加学员'){
        // 获取表单数据
        let data= val(document.querySelector('#modal form'))
        data.age = +data.age
        data.gender = +data.gender
        data.group = +data.group
        data.hope_salary = +data.hope_salary
        data.salary = +data.salary
        console.log(data)
        axios({
        url:'/students',
        method:'POST',
        data
        }).then(res=>{
        // console.log(res)
        message.success(res.data.message)
        // 重置表单
        let form = document.querySelector('form')
        form.reset()
        modal.hide() // 关闭弹出层
        renderStudent()
        })
  }
})

// 编辑业务
document.querySelector('tbody').addEventListener('click',function(e){
  if(e.target.classList.contains('bi-pen')){
 // 更改titile
 document.querySelector('.modal-title').innerHTML='编辑学员'
  // 1..模态框显示
  modal.show()
  }
 
})
//1. 数据回填
let data
document.querySelector('.list').addEventListener('click',async function(e){
  if(e.target.classList.contains('bi-pen')){
    let id = e.target.dataset.id
  //   let result = await axios({ url:`/students/${id}`, method:'GET',})
  //   console.log(result.data.data)

  //  let res1= await axios({url:'/api/city', method:'GET',params:{pname:result.data.data.province}})
  // let res2= await axios({ url:'/api/area',method:'GET',params:{pname:result.data.data.province,cname:result.data.data.city}})
  // console.log(res1);
  // document.querySelector('[name=city]').innerHTML=res1.data.data.map((item)=>{return `<option value="${item}">${item}</option>`}).join('')

  // console.log(res2);
  // document.querySelector('[name=city]').innerHTML=res2.data.data.map((item)=>{return `<option value="${item}">${item}</option>`}).join('')

  // val(document.querySelector('#form',result.data.data))
      // 数据回填
  axios({
            url:`/students/${id}`,
            method:'GET',
      }).then(res=>{
            //  console.log(res)
            data = res.data.data
            // console.log(data)
            //  省市区的回填
            Promise.all([axios({
              url:'/api/city',
              method:'GET',
              params:{
              pname: data.province
            }}),axios({
                url:'/api/area',
                method:'GET',
                params:{
                pname: data.province,
                cname:data.city
                }
            })]).then(res=>{
                document.querySelector('[name=city]').innerHTML=res[0].data.data.map((item)=>{return `<option value="${item}">${item}</option>`}).join('')
                document.querySelector('[name=area]').innerHTML=res[1].data.data.map((item)=>{return `<option value="${item}">${item}</option>`}).join('')
                //  数据回填
                val(document.querySelector('form'),data)
            })
            renderStudent()
      })
    }
  })
  // 修改

  document.querySelector('#submit').addEventListener('click',async function(){
      if(document.querySelector('.modal-title').innerHTML === '编辑学员' ){
        let id = document.querySelector('.bi-trash').dataset.id
        // let result = await axios({ url:`/students/${id}`, method:'GET',})
        // console.log(result.data.data)
          let data = val (document.querySelector('form'))
          data.age = +data.age
          data.gender = +data.gender
          data.group = +data.group
          data.hope_salary = +data.hope_salary
          data.salary = +data.salary
        axios({
          url:`/students/${id}`,
          method:'PUT',
          data
        }).then(res=>{

          message.success('修改成功')
          modal.hide()
          renderStudent()

        })

      }
  })
// 删除业务
document.querySelector('.list').addEventListener('click',function(e){
  if(e.target.classList.contains('bi-trash')){
    let id = e.target.dataset.id
    if(!confirm('您确定要删除吗？')) return
  //  if(message.confirm('提示','您确定要删除吗')){
    axios({
      url:`/students/${id}`,
      method:'DELETE',
    }).then(res=>{
      // console.log(res)
      message.success('删除成功')
      // 更新数据
      renderStudent()
    })
  //  }
    
  }
})

  





